<template>
	<div class="sw_section_container">
		<div class="sw_query_form" v-if="$isHasAuth(topFrames)">
			<el-form size="small" inline>
				<template v-if="$isHasAuth(topButton)">
					<el-form-item>
						<el-date-picker v-model="timeRanges" v-bind="dateConfig"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="queryTableData">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-refresh-left" @click="handleResetQuery">重置</el-button>
					</el-form-item>
				</template>
				<el-form-item v-hasPermi="'bbac835275174d9fa05ddae3e0272d5a'">
					<el-button type="warning" icon="el-icon-upload2" @click="handleExportData">导出</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="sw_table_container">
			<el-table size="medium" ref="table" :data="tableData" stripe height="100%" class="index_table_wrapper">
				<el-table-column label="PI" prop="piName" min-width="150"></el-table-column>
				<el-table-column label="课题数" prop="topicNum" min-width="100"></el-table-column>
				<el-table-column label="机时数" prop="hourNum" min-width="100"></el-table-column>
				<el-table-column label="中心外机时数" prop="zxwHourNum" min-width="140"></el-table-column>
				<el-table-column label="对中心外开放率" prop="zxwHourRatio" min-width="140"></el-table-column>
				<el-table-column label="对校外开放率" prop="xwHourRatio" min-width="140"></el-table-column>
				<el-table-column label="服务单位数" prop="deptCount" min-width="100"></el-table-column>
				<el-table-column label="服务用户数" prop="userCount" min-width="100"></el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import mixins from '../mixins';
import { mapGetters } from 'vuex';
import { piDataStat } from '@/api/business/stat';
import { exportDataToExcel } from '@/utils/exceljs';
export default {
	mixins: [mixins],
	data() {
		return {};
	},
	computed: {
		...mapGetters(['principalData']),
		topButton() {
			return ['6f99c8da11164091b234a2cdfbc4d261'];
		},
		topFrames() {
			return [...this.topButton, 'bbac835275174d9fa05ddae3e0272d5a'];
		}
	},
	watch: {
		timeRanges(data) {
			if (!data) {
				this.$delete(this.queryData, 'startTime');
				this.$delete(this.queryData, 'endTime');
			} else {
				this.$set(this.queryData, 'startTime', data[0]);
				this.$set(this.queryData, 'endTime', data[1]);
			}
		}
	},
	mounted() {
		this.handleResetQuery();
	},
	methods: {
		//获取表格数据
		async getTableData() {
			let params = { ...this.queryData };
			let result = await piDataStat(params).then((res) => res.data);
			if (result.code === '0') {
				this.tableData = this.formatTableData(result.data || []);
			}
		},

		queryTableData() {
			this.loading = true;
			this.getTableData();
		},

		//重置查询
		handleResetQuery() {
			this.queryData = {};
			this.timeRanges = null;
			this.$nextTick(() => {
				this.queryTableData();
			});
		},

		//格式化表格数据
		formatTableData(data) {
			return data.map((item) => {
				let obj = { topicNum: item.scount };
				let info = this.principalData.find((n) => n.id === item.name);
				obj['deptCount'] = item.deptCount;
				obj['userCount'] = item.userCount;
				obj['piName'] = !info ? '--' : info.userName;
				obj['hourNum'] = this.allMachineHourFormatter(item);
				obj['xwHourRatio'] = this.xwHourRatioFormatter(item);
				obj['zxwHourNum'] = this.zxwMachineHourFormatter(item);
				obj['zxwHourRatio'] = this.zxwHourRatioFormatter(item);
				return obj;
			});
		},

		allMachineHourFormatter(data) {
			let hours = 0;
			data.list.forEach((item) => {
				hours += Number(item.scount);
			});
			return hours;
		},

		zxwMachineHourFormatter(data) {
			let hours = 0;
			data.list.forEach((item) => {
				if (item.name !== '中心') {
					hours += Number(item.scount);
				}
			});
			return hours;
		},

		zxwHourRatioFormatter(data) {
			let allHour = 0;
			let zxwHour = 0;
			data.list.forEach((item) => {
				allHour += Number(item.scount);
				if (item.name !== '中心') {
					zxwHour += Number(item.scount);
				}
			});
			if (allHour === 0) {
				return '0%';
			} else {
				return `${Math.round((zxwHour / allHour) * 10000) / 100}%`;
			}
		},

		xwHourRatioFormatter(data) {
			let xwHour = 0;
			let allHour = 0;
			data.list.forEach((item) => {
				allHour += Number(item.scount);
				if (item.name !== '校内单位') {
					xwHour += Number(item.scount);
				}
			});
			if (allHour === 0) {
				return '0%';
			} else {
				return `${Math.round((xwHour / allHour) * 10000) / 100}%`;
			}
		},

		exportConfig() {
			let config = { data: this.tableData };
			let columns = this.$refs['table'].columns;
			config['headers'] = [columns.map((n) => n.label)];
			config['fields'] = columns.map((n) => n.property);
			config['columnsWidth'] = columns.map((n) => n.realWidth / 9);
			config['merges'] = columns.map((n, i) => {
				return { row: n.level - 1, col: i, rowspan: n.rowSpan, colspan: n.colSpan };
			});
			return config;
		},

		handleExportData() {
			let config = this.exportConfig();
			config['sheetName'] = 'PI数据';
			config['attrs'] = [
				{
					rowStart: 0,
					rowEnd: 0,
					colStart: 0,
					colEnd: config.fields.length - 1,
					attr: {
						height: 24,
						font: { bold: true },
						fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: '99CCFF' } }
					}
				},
				{
					rowStart: 0,
					rowEnd: config.data.length,
					colStart: 0,
					colEnd: config.fields.length - 1,
					attr: {
						height: 20,
						alignment: { vertical: 'middle' },
						border: { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } }
					}
				},
				{
					rowStart: 0,
					rowEnd: config.data.length,
					colStart: 1,
					colEnd: config.fields.length - 1,
					attr: {
						alignment: { vertical: 'middle', horizontal: 'center' }
					}
				}
			];
			exportDataToExcel(config, 'PI数据.xls');
		}
	}
};
</script>

<style scoped></style>
